<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title th:text="#{getpasswordpage.title}"></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->

		<link rel="stylesheet" href="css/css.css" th:href="@{/css/min.css}"/>            
        <script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
        		+'"><\/script>')
        /*]]>*/</script>
        <script type="text/javascript" th:src="@{/js/econgen.js}"></script>
        <script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
        $(function(){
        	$('#btn-getQuestion').bind('click', function(){
        		var u = $('#username').val();
        		if(u != ''){
        			$.ajax({
        				url: /*[[@{/getSecurityQuestion}]]*/''
        				, type: 'POST'
        				, dataType: 'json'
        				, data: {username: u}
        				, error: function(data){
        					alert(data);
        				}
        				, success: function(data, textStatus, jqXHR){
        					if(data){
        						if(data.result){
	        						$('#question').val(data.result);
	        						$('#question-li').show();
        						} else {
        							alert(/*[[#{getpasswordpage.content.noPersonFound}]]*/''
        									);
        						}
        					} else {
        						alert(/*[[#{getpasswordpage.js.err}]]*/'error'
        								);
        					}
        				}
        			});
        		} else {
        			alert(/*[[#{getpasswordpage.content.username}]]*/''
        					);
        		}
        	});
        });
        function checkUsername(){
        	var u = $('#username').val();
        	if(u != ''){
        		$('#_username').val(u);
        		return true;
        	}
        	alert(/*[[#{getpasswordpage.content.username}]]*/''
				);
        	$('#username').focus();
        	return false;
        }
        /*]]>*/</script>
    </head>
    <body>
        <header th:substituteby="common/template::header"></header>
        
        <div class="container">
        	<div class="row">
        		<div class="twelvecol">
        			<h1 th:text="#{getpasswordpage.title}"></h1>
        			<div class="threecol top-border">
       					<h4 th:text="#{getpasswordpage.content.help.title}"></h4>
       					<ul class="helper">
       						<li>
       							<a href="#" th:href="@{/c/a/getPWFaq}" th:text="#{getpasswordpage.content.help.faq}"></a>
       						</li>
       					</ul>
       				</div>
       				<div class="sixcol top-border">
       					<h3 th:text="#{getpasswordpage.content.title}"></h3>
       					<div th:if="${msg == 0}" class="error-msg" th:text="#{getpasswordpage.content.resetfailed}"></div>
       					<div th:if="${msg == -1}" class="error-msg" th:text="#{getpasswordpage.content.noPersonFound}"></div>
       					<div th:if="${msg == -2}" class="error-msg" th:text="#{getpasswordpage.content.emailNotVerified}"></div>
       					<div class="form-reg">
       						<form th:action="@{/getMyPassword}" method="post">
	       						<ul class="top-border-dot">
	       							<li class="twelvecol">
	       								<label><strong th:text="#{getpasswordpage.content.username}"></strong><span class="required">*</span></label>
	       								<input name="username" id="username" th:value="${username}?${username}"/>
	       							</li>
	       							<li class="twelvecol">
	       								<button id="btn-getQuestion" class="form-btn" type="button" th:text="#{getpasswordpage.content.getQuestion}"></button>
	       							</li>
	       							<li class="twelvecol" id="question-li" style="display: none;">
	       								<label><strong th:text="#{getpasswordpage.content.question}"></strong></label>
	       								<input id="question" readonly="readonly"/>
	       							</li>
	       							<li class="twelvecol">
	       								<label><strong th:text="#{getpasswordpage.content.answer}"></strong><span class="required">*</span></label>
	       								<input name="answer" />
	       							</li>
	       							<li class="twelvecol">
	       								<hr/>
	       								<button class="form-btn" type="submit" th:text="#{getpasswordpage.content.confirm}"></button>
	       								<hr/>
	       							</li>
	       						</ul>
       						</form>
       					</div>
       				</div>
       				<div class="threecol last top-border">
       					<h3 th:text="#{getpasswordpage.content.email.title}"></h3>
       					<form th:action="@{/emailMeToResetPassword}" method="post">
       						<input type="hidden" name="username" id="_username"/>
	       					<button id="btn-email-resetPw" class="form-btn" th:text="#{getpasswordpage.content.email.button}" onclick="return checkUsername();"></button>
       					</form>
       				</div>
        		</div>
        	</div>
        </div>

        <footer th:substituteby="common/template::footer"></footer>
        
    </body>
</html>
